<template>
  <div>
    <!-- 常规写法 -->
    <!-- <h1>当前求和为：{{countAbout.sum}}</h1>
    <h3>当前求和放大10倍为：{{bigSum}}</h3>
    <h3>我在{{countAbout.school}}，学习{{countAbout.subject}}</h3>
    <h3 style="color: red">Person组件的总人数是：{{personAbout.personList.length}}</h3> -->

    <h1>当前求和为：{{sum}}</h1>
    <h3>当前求和放大10倍为：{{bigSum}}</h3>
    <h3>我在{{school}}，学习{{subject}}</h3>
    <h3 style="color: red">Person组件的总人数是：{{personList.length}}</h3>

    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increament(n)">+</button>
    <button @click="decreament(n)">-</button>
    <!-- <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button> -->

    <button @click="increamentOdd(n)">当前求和为奇数再加</button>
    <button @click="increamentWait(n)">等一秒再加</button>
    <!-- <button @click="jiaOdd(n)">当前求和为奇数再加</button>
    <button @click="jiaWait(n)">等一秒再加</button> -->
    
  </div>
</template>

<script>
  import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'

  export default {
    name: "Count",
    data() {
      return {
        n: 1
      }
    },
    computed: {
      // 借助mapState生产计算属性，从state中读取数据（数组写法）
      // 常规写法
      // ...mapState(['countAbout', 'personAbout']),
      // 命名空间映射对象写法
      ...mapState('countAbout', ['sum', 'school', 'subject']),
      ...mapState('personAbout', ['personList']),

      // 借助mapGetters生产计算属性，从getters中读取数据（数组写法）
      ...mapGetters('countAbout', ['bigSum'])
    },
    methods: {
      // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
      ...mapMutations('countAbout', {increament: "JIA", decreament: "JIAN"}),

      // 借助mapActions生成对应的方法，方法中会调用commit去联系actions(对象写法)
      ...mapActions('countAbout', {increamentOdd: "jiaOdd", increamentWait: "jianWait"}),
    },
    mounted() {
      console.log(this.$store)
    }
  }
</script>

<style>

</style>